<template>
  <div id="LabInstrSetupForm">
    <vxe-toolbar>
      <template #buttons>
        <div class="toolbartitle">基本信息</div>
      </template>
      <template #tools>
        <div class="margin-right-sm">
          <el-button type="primary" @click="handleAdd()">新建</el-button>
          <el-button type="primary" v-loading="showLoading" @click="save()">保存</el-button>
          <el-button type="default" @click="handleAdd()">重置</el-button>
        </div>
      </template>
    </vxe-toolbar>
    <el-scrollbar style="height: calc(100% - 40px)" scroll>
      <el-form ref="labreportform" :rules="formRules" :model="form" label-width="100px" inline-message inline>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编码" prop="antCode">
              <el-input v-model="form.antCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="antName">
              <el-input v-model="form.antName" @blur="addInputCode()"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="助记符" prop="inputCode">
              <el-input v-model="form.inputCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名称" prop="englishName">
              <el-input v-model="form.englishName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="人用" prop="humanUse">
              <el-switch v-model="form.humanUse" inline-prompt active-text="是" inactive-text="否" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="兽用">
              <el-switch v-model="form.beastUse" inline-prompt active-text="是" inactive-text="否" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Clsi顺序" prop="clsiOrder">
              <el-input v-model="form.clsiOrder"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="WhonetAbxCode" prop="whonetAbxCode">
              <el-input v-model="form.whonetAbxCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="抗生素分类" prop="instrClass">

              <VxePulldownSelection v-enterNextInput :url="'/bac/ant/antClass/findBacAntClassList'" @confirmClick="SelectRowClickVxe" :tableColumn="[
              { field: 'antClassNo', title: '编码' },
              { field: 'antClassNa', title: '名称', } 
              ]" :aimKeys="[
               { aimKey: 'antClassNa', rowKey: 'antClassNa' },
               { aimKey: 'antClassNo', rowKey: 'antClassNo' }
              ]" :displayTexts="['antClassNa']" :displayTextObj="form.antClassNa ? form.antClassNa : ''" />

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="抗生素子分类" prop="instrClass">

              <VxePulldownSelection v-enterNextInput :url="'/bac/ant/antSubClass/findBacAntSubClassList'" @confirmClick="SelectRowClickVxe" :tableColumn="[
              { field: 'subClassNo', title: '编码' },
              { field: 'subClassNa', title: '名称', } 
              ]" :aimKeys="[
               { aimKey: 'subClassNa', rowKey: 'subClassNa' },
               { aimKey: 'subClassNo', rowKey: 'subClassNo' }
              ]" :displayTexts="['subClassNa']" :displayTextObj="form.subClassNa ? form.subClassNa : ''" :dataObj="{ antClassNo: form.antClassNo }" />

            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="whoCode" label="whoCode">
              <el-input v-model="form.whoCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="verificationPrice" label="效价">
              <el-input v-model="form.verificationPrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="whonetTest" label="whonet检测编号">
              <el-input v-model="form.whonetTest"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="verificationPrice" label="感染部位">
              <VxePulldownSelectionWithNa style="width: 100%" :isChild="false" :url="'/lis/bac/base/site-of-infection/dict/findDictList'" @confirmClick="SelectRowClickVxe" :tableColumn="[
                      { type: 'seq', title: '#', width: '30px' },
                      { field: 'name', title: '名称' },
                      { field: 'code', title: '编码',width:'60px' }
                    ]" :aimKeys="[
                      { aimKey: 'infeSiteId', rowKey: 'id' },
                      { aimKey: 'infeSiteNa', rowKey: 'name' },
                      { aimKey: 'infeSiteNo', rowKey: 'code' }
                    ]" :displayTexts="['infeSiteNa']" :displayTextObj="form.infeSiteNa ? form.infeSiteNa : ''" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="研究分类" prop="studyType">
              <el-input v-model="form.studyType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="顺序" prop="seq">
              <el-input v-model="form.seq"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区==========
import { ref, reactive, getCurrentInstance, PropType, onMounted } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { pageSizes, formatDateTime } from '@/utils/common';
import SelectDataList from '@/components/SelectDataList.vue';
import { isEmpty } from 'lodash';

import VxePulldownSelection from '@/components/VxePulldownSelection.vue'; //对应报告单元下拉组件
import VxePulldownSelectIconfont from '../../../components/VxePulldownSelectIconfont.vue';
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 基本信息form表单
let form = reactive({
  id: '',
  antCode: '',
  antName: '',
  inputCode: '',
  seq: 0,
  englishName: '',
  verificationPrice: '',
  humanUse: '',
  beastUse: '',
  clsiOrder: '',
  whonetAbxCode: '',
  abxNumber: '',
  antType: '',
  whoCode: '',
  dinCode: '',
  jacCode: '',
  eucastCode: '',
  eucastOrder: '',
  userCode: '',
  atcCode: '',
  animalGp: '',
  studyType: '',
  infeSiteNo: '',
  infeSiteNa: '',
  whonetTest: '',
  antClassNo: '',
  subClassNo: '',
  antClassNa: '',
  subClassNa: ''
});

// form表单校验规则
let formRules: any = {
  antCode: [
    {
      required: true,
      message: '请输入编码',
      trigger: 'change'
    }
  ],

  antName: [
    {
      required: true,
      message: '请输入抗生素名称',
      trigger: 'blur'
    }
  ],
  inputCode: [
    {
      required: true,
      message: '请输入助记符',
      trigger: 'blur'
    }
  ],
  englishName: [
    {
      required: true,
      message: '请输入英文名称',
      trigger: 'blur'
    }
  ]
};

let labreportform = ref(null); //form表单标记ref

let showLoading = ref(false); //保存按钮
// 方法定义区 =============
defineExpose({ initPage, clearFormData, initAddPage });
let repSeq = 0;
function initAddPage(addSeq: number) {
  repSeq = addSeq;
}

// 左侧表格点击当前行传过来的数据
function initPage(row: any) {
  if (row !== null) {
    for (let prop in row) {
      form[prop] = row[prop];
    }
  }
}

onMounted(() => {});

// 填写仪器名称 自动生成助记符
function addInputCode() {
  form.inputCode = funBdsJsResult('firstPinYinFun', form.antName);
}

function SelectRowClick(row) {
  //formData.germType = row.code;
  form.antType = row.name;
}

//清空数据
function clearFormData() {
  for (let key in form) {
    form[key] = '';
  }
  const el: any = proxy.$refs['labreportform'];
  el.resetFields(); //重置该表单项，将其值重置为初始值，并移除校验结果
}

// 新增按钮 + 重置按钮
function handleAdd() {
  clearFormData();
}

// 保存按钮
function save() {
  const el: any = proxy.$refs['labreportform'];
  if (!el) return;
  el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (form.id !== '' && form.id !== null) {
      if (isEmpty(form.subClassNo)) {
        form.subClassNo = '';
      }
      if (isEmpty(form.antClassNo)) {
        form.antClassNo = '';
      }
      if (isEmpty(form.infeSiteNo)) {
        form.infeSiteNo = '';
      }
      if (isEmpty(form.infeSiteNa)) {
        form.infeSiteNa = '';
      }
      showLoading.value = true;
      proxy.$http
        .post('/lis/bacAntibioticsDict/edit', form)
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('修改抗生素基本信息成功', VxeNotifyType.success);

            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
          } else {
            return;
          }
        })
        .catch((err: any) => {
          VxeMessage('修改抗生素基本信息异常', VxeNotifyType.error);
        });
    } else {
      form.seq = repSeq;
      proxy.$http
        .post('/lis/bacAntibioticsDict/addAntibioticsDict', form)
        .then((res: any) => {
          if (res.status.code === 1) {
            VxeMessage('新增抗生素成功', VxeNotifyType.success);
            proxy.$emit('getTableData'); //触发父组件重新获取表格数据
          } else {
            return;
          }
        })
        .catch((err: any) => {
          VxeMessage('新增抗生素异常', VxeNotifyType.error);
        });
    }
    showLoading.value = false;
    clearFormData(); //清空数据
  });
}

function SelectRowClickVxe(e) {
  console.log(e);

  e.aimKeys.forEach((m) => {
    form[m.aimKey] = e.row[m.rowKey];
  });
  console.log(form);
}
</script>

<style lang="scss" scoped>
#LabInstrSetupForm {
  height: 100%;

  :deep(.el-scrollbar__view) {
    height: 100%;
  }

  .baseForm {
    height: calc(100% - 40px);

    .el-form-item--large {
      margin-bottom: 4px;
    }
  }

  .btnBox {
    width: 100%;
  }
}
</style>
